<template>
  <div>
    <el-dialog v-model="dialogVisible" title="选择老人" width="800" :before-close="handleClose">
      <span>
        <!-- 表单 -->
        <el-form
          ref="ruleFormRef"
          :inline="true"
          :model="ruleForm"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="姓名：">
            <el-input v-model="ruleForm.name" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="身份证号：">
            <el-input v-model="ruleForm.idCard" placeholder="请输入" clearable />
          </el-form-item>
          <div style="float: right">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          </div>
        </el-form>

        <!-- 表格 -->
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          row-key="id"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" :reserve-selection="true" width="55" />
          <el-table-column prop="photo" label="头像">
            <template #default="scope">
              <img :src="imgUrl + scope.row.photo" alt="" style="width: 50px; height: 50px" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="address" label="性别">
            <template #default="scope">
              {{ scope.row.gender == 1 ? "男" : "女" }}
            </template>
          </el-table-column>
          <el-table-column prop="idCard" label="身份证号" />
        </el-table>
        <div class="page">
          <el-pagination
            v-model:current-page="ruleForm.page"
            v-model:page-size="ruleForm.pageSize"
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits } from "vue";
import { useRouter } from "vue-router";
import { ListData, ListParams } from "@/api/market/elderly/type";
import type { FormInstance } from "element-plus";
import ELTable, { TableData } from "@/components/ELTable.vue";
import { getElderlyList } from "@/api/market/elderly/elderly";

const imgUrl = import.meta.env.VITE_IMG_URL;

const ruleFormRef = ref<FormInstance>();
// 定义发出的事件类型
const emit = defineEmits<{
  (e: "selectElderly", multipleSelection: Object[]): void;
  (e: "selectClose"): void;
}>();

const props = defineProps({
  elderlys: Array,
});

// 分页
const handleCurrentChange = (val: number) => {
  ruleForm.page = val;
  getList();
};

const dialogVisible = ref(true);
const multipleTableRef = ref();

const ruleForm = reactive<ListParams>({
  page: 1,
  pageSize: 2,
  name: "",
  idCard: "",
});

// 表格
const total = ref(0); // 总页数
const tableData = ref<ListData[]>([]);
const getList = async () => {
  let res = await getElderlyList(ruleForm);
  // console.log(res);
  tableData.value = res.list;
  total.value = res.counts;
  nextTick(() => {
    let ids = props.elderlys!.map((item: any) => item.id);
    tableData.value
      .filter((item) => ids.includes(item.id))
      .forEach((element) => {
        multipleTableRef.value?.toggleRowSelection(element, true);
      });
  });
};

// 多选
const multipleSelection = ref<any[]>([]);
const handleSelectionChange = (val: any[]) => {
  let ids = tableData.value.map((item) => item.id);
  multipleSelection.value = multipleSelection.value.filter((item) => !ids.includes(item.id));
  multipleSelection.value = [...multipleSelection.value, ...val];
};

if (props.elderlys) {
  multipleSelection.value = props.elderlys;
}

// 确认添加
const submit = () => {
  emit("selectElderly", multipleSelection.value);
  handleClose();
};

//取消
const handleClose = () => {
  emit("selectClose");
};

//查询
const search = () => {
  multipleTableRef.value.getData(ruleForm);
};

//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

onMounted(() => {
  getList();
});
</script>

<style scoped lang="less">
.page {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
</style>
